<template>
  <div class="homes">
    <!-- 头部搜索框 -->
    <header>
      <div class="big">
        <p @click="handleCity">
          <span>{{ city.label }}</span>
          <i class="icon iconfont icon-chevron-thin-down"></i>
        </p>
        <div class="input">
          <i class="icon iconfont icon-fangdajing"></i>
          <input type="text" placeholder="输入小区或者地址" />
        </div>
      </div>
      <span @click="handleMap">
        <i class="icon iconfont icon-dizhi-01"></i>
      </span>
    </header>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img :src="'http://47.102.145.189:8009' + item.imgSrc" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="dll">
      <dl @click="hanldeGo1">
        <dt>
          <i class="iconfont icon-dazhongdianping"></i>
        </dt>
        <dd>整租</dd>
      </dl>
      <dl @click="hanldeGo2">
        <dt>
          <i class="iconfont icon-wode-xuanzhong"></i>
        </dt>
        <dd>合租</dd>
      </dl>
      <dl @click="hanldeGo3">
        <dt><i class="iconfont icon-address"></i></dt>
        <dd>地图找房</dd>
      </dl>
      <dl @click="hanldeGo4">
        <dt><i class="iconfont icon-gongzuo"></i></dt>
        <dd>去出租</dd>
      </dl>
    </div>
    <!-- 租房小组 -->
    <div class="heng">
      <p>租房小组</p>
      <span>更多</span>
    </div>
    <div class="zu">
      <dl v-for="v in list" :key="v.id">
        <dt>
          <p>{{ v.title }}</p>
          <span>{{ v.desc }}</span>
        </dt>
        <dd>
          <img :src="v.imgSrc" alt="" />
        </dd>
      </dl>
    </div>
    <!-- 最新资讯 -->
    <div class="xun">
      <h4>最新资讯</h4>
      <dl v-for="v in xun" :key="v.id">
        <dt>
          <img :src="v.imgSrc" alt="" />
        </dt>
        <dd>
          <p class="title">{{ v.title }}</p>
          <p class="fen">
            <span>{{ v.from }}</span>
            <span>{{ v.date }}</span>
          </p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "../utils/request";
export default {
  data() {
    return {
      images: [],
      list: [],
      xun: [],
    };
  },
  created() {
    axios.get("/home/swiper").then((res) => {
      // console.log(res.data);
      this.images = res.data.body;
    });

    this.getZu();
    this.getXun();
  },
  computed: {
    ...mapState(["city"]),
  },
  methods: {
    handleCity() {
      this.$router.push("/index");
    },
    handleMap() {
      this.$router.push("/ditu");
    },
    hanldeGo1() {
      this.$router.push("/zheng");
    },
    hanldeGo2() {
      this.$router.push("/he");
    },
    hanldeGo3() {
      this.$router.push("/map");
    },
    hanldeGo4() {
      this.$router.push("/zu");
    },
    getZu() {
      axios.get("/home/groups").then((res) => {
        // console.log(res.data,'111');
        if (res.data.status === 200) {
          this.list = res.data.body;
        }
      });
    },
    getXun() {
      axios.get("/home/news").then((res) => {
        // console.log(res, "111");
        if (res.data.status === 200) {
          this.xun = res.data.body;
        }
      });
    },
  },
};
</script>


<style scoped lang="scss">
.homes {
  width: 100%;
  height: 100%;
  padding: 3px;
  position: relative;
}
.homes header {
  width: 90%;
  margin: 0 auto;

  background: #fff;
  height: 30px;
  align-self: center;
  display: flex;
  justify-content: space-around;
  position: absolute;
  top: 1%;
  left: 2%;
  z-index: 999;
  span {
    i {
      font-size: 20px;
    }
  }
  .big {
    display: flex;
    p {
      width: 25%;
      display: flex;
      justify-content: space-around;
      border-right: 1px solid #ccc;
      span {
        font-size: 14px;
      }
      i {
        font-size: 16px;
      }
    }
    .input {
      display: flex;
      justify-content: space-around;
      input {
        height: 30px;
        flex: 1;
        width: 60%;
      }
    }
  }
}
.van-swipe {
  width: 100%;
  height: 31%;
  background: #fff;
}
.van-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
}
.heng {
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.heng p {
  font-size: 16px;
}
.heng span {
  font-size: 14px;
  color: #ccc;
}
.dll {
  width: 100%;
  display: flex;
  padding: 6px;
  justify-content: space-around;

  background: #fff;
}
.dll dl {
  text-align: center;
  left: 60px;
  background: #fff;
}
.dll dl dd {
  font-size: 16px;
}
.dll dl dt {
  margin: 14px auto;
}

.dll dl dt i {
  font-size: 20px;
  color: cadetblue;
}
.zu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0 6px;
}
.zu dl {
  width: 46%;
  display: flex;
  justify-content: space-around;
  background: #fff;
  margin: 6px;
  padding: 16px 9px;
}
.zu dl dt span {
  color: #ccc;
  line-height: 25px;
}
.zu dl dd {
  margin-left: 7px;
  width: 59px;
  height: 59px;
}
.zu dl dd img {
  width: 100%;
  height: 100%;
}
.xun {
  margin-top: 6px;
  width: 100%;
  padding: 10px;
  background: #fff;
}
.xun h4 {
  line-height: 30px;
  font-size: 14px;
}
.xun dl {
  padding: 7px 0;
  border-bottom: 1px solid #ccc;
  display: flex;
}
.xun dl dt {
  width: 110px;
  height: 80px;
}
.xun dl dt img {
  width: 100%;
  height: 100%;
}
.xun dl dd {
  margin-left: 14px;
}
.title {
  font-weight: 900;
}
.fen {
  display: flex;
  justify-content: space-between;
  line-height: 70px;
  color: #ccc;
}
</style>